<template>
    <el-button @click="changeLayout" style="position: absolute; top: 50%;right: 0;" > 测试</el-button>
    <component :is="LayoutComponents[layout]" />
</template>

<script setup lang="ts">
import { computed, type Component, onMounted } from "vue";
import Layout1 from "./layout1/index.vue";
import Layout2 from "./layout2/index.vue";
import Layout3 from "./layout3/index.vue";
import { useGlobalStore } from '@/stores/useGlobalStore.ts'

const globalStore = useGlobalStore();
const layout = computed(() => globalStore.getLayout);
onMounted(()=>{
  console.log(globalStore.getLayout);
})
let i =0;
let f:any = ['layout1', 'layout2','layout3'];
const changeLayout = ()=>{
  if(i>=f.length){
    i=0;
  }
  globalStore.changeLayout(f[i++]);
}

const LayoutComponents: Record<string,Component> = {
  layout1: Layout1,
  layout2: Layout2,
  layout3: Layout3,
};
</script>

<style scoped>

</style>